<!--
 * @Description: 新增/修改信息发布弹框
 * @Author: Huang Junjie
 * @Date: 2021-05-12 10:53:29
 * @LastEditTime: 2022-06-29 15:49:11
 * @LastEditors: zhangweili zhang_weili@uxsino.com
-->
<template>
  <div>
    <base-dialog
      class="dialog_box"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :show-default-footer="dialog.type=='view'?false:true"
      @updateData="addWarnInformation">
      <el-form
        ref="addEditWarnRulesFormOne"
        :model="params"
        status-icon
        label-width="110px">
        <el-form-item
          prop="warnTitle"
          :rules="rules.warnTitle"
          label="标题">
          <el-input
            v-model="params.warnTitle"
            size="mini"
            :disabled="dialog.disabled"
            placeholder="请输入标题"
            :maxlength="50"
            clearable />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item
              prop="warnType"
              :rules="rules.warnType"
              label="信息发布类型">
              <el-select
                v-model="params.warnType"
                size="mini"
                placeholder="请选择信息发布类型"
                clearable>
                <el-option
                  v-for="(item, index) in warnTypeArr"
                  :key="`b${index}`"
                  :label="item.itemName"
                  :disabled="dialog.disabled"
                  :value="item.dictionaryId" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="createBy"
              :rules="rules.createBy"
              label="发布人">
              <el-input
                v-model="params.createBy"
                size="mini"
                :disabled="dialog.disabled"
                placeholder="请输入发布人"
                :maxlength="20"
                clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          prop="intro"
          :rules="rules.description"
          label="简介">
          <el-input
            v-model="params.description"
            size="mini"
            placeholder="请输入简介"
            :disabled="dialog.disabled"
            :maxlength="50"
            clearable />
        </el-form-item>
        <el-form-item
          prop="contentString"
          :rules="rules.content"
          label="内容">
          <tinymce
            ref="tinymce"
            v-model="params.contentString"
            :height="400" />
        </el-form-item>
        <el-form-item label="上传附件">
          <el-upload
            ref="upload_add"
            class="upload-demo"
            drag
            :file-list="params.imagesList"
            :action="action"
            :headers="headers"
            :on-error="uploadError"
            :on-success="uploadSuccess"
            :on-remove="handleRemove"
            multiple>
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <!-- <upload-file ref="upload" :model="fileModal" @on-success="uploadSuccess" /> -->
        </el-form-item>
      </el-form>
    </base-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import Tinymce from '@/components/Tinymce'
import { addWarnInformation, getWarnType } from '@/api/cms/warn-information'
// import UploadFile from '@/views/jjzhxt/components/UploadFile'

export default {
  name: 'AddEditWarn',
  components: {
    Tinymce
  },
  props: {
    // 弹框配置
    dialog: {
      type: Object,
      default() {
        return {}
      }
    },

    // 信息发布类型
    warnTypeArr: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      action: process.env.VUE_APP_BASE_API + '/dfile/file/upload',
      headers: {
        Authorization: 'Bearer ' + getToken()
      },

      fileModal: {
        title: '',
        visible: true,
        pathList: [],
        fileList: [],
        type: 1,
        bizType: '1',
        key: 0,
        index: 0,
        isDetail: false
      },
      options: [],
      // 新增/修改信息发布参数
      params: {
        id: '',
        warnTitle: '',
        warnType: '',
        createBy: '',
        contentString: '',
        description: '',
        imagesList: []
      },

      // 表单校验规则
      rules: {
        warnTitle: { required: true, message: '请输入信息发布标题！' },
        warnType: { required: true, message: '请选择信息发布类型！' },
        createBy: { required: true, message: '请输入发布人！' }
        // contentString: { required: true, message: '请输入内容！', trigger: 'blur' },
        // intro: { required: true, message: '请输入简介！', trigger: 'blur' }
      }
    }
  },
  watch: {
    // 监听弹窗弹出
    'dialog.visible'() {
      this.params = {
        id: '',
        warnTitle: '',
        warnType: '',
        createBy: '',
        contentString: '',
        description: '',
        imagesList: []
      }
      this.fileModal.fileList = []
      this.fileModal.pathList = []
      this.$nextTick(() => {
        this.$refs.addEditWarnRulesFormOne.clearValidate()
      })
      if (this.dialog.visible === true && this.dialog.type !== 'add') {
        this.params.id = this.dialog.editInfo.id
        this.params.warnTitle = this.dialog.editInfo.warnTitle
        this.params.contentString = this.dialog.editInfo.contentString
        this.params.warnType = this.dialog.editInfo.warnType
        this.params.createBy = this.dialog.editInfo.createBy
        this.params.description = this.dialog.editInfo.description

        // 赋值富文本
        this.$nextTick(() => {
          this.$refs.tinymce.setContent(this.dialog.editInfo.contentString)
        })

        // 组装params.imagesList
        this.dialog.editInfo.imagesList.forEach(val => {
          const data = {
            name: val.fileName,
            fileSize: val.fileSize,
            fileExtname: val.fileExtname,
            fileName: val.fileName,
            filePath: val.filePath,
            fileType: val.fileType,
            memo: val.memo
          }
          this.params.imagesList.push(data)
          this.fileModal.fileList.push(data)
          this.fileModal.pathList.push(data.filePath)
        })
      } else {
        // 清除富文本
        this.$nextTick(() => {
          this.$refs.tinymce.setContent('')
        })
      }
    }
  },
  methods: {
    // 文件上传
    // uploadSuccess(fileList, type, key, index, fileArr) {
    //   this.params.imagesList = []
    //   fileArr.forEach(val => {
    //     const data = {
    //       name: val.fileName,
    //       fielSize: val.fielSize,
    //       fileExtname: val.fileExtname,
    //       fileName: val.fileName,
    //       filePath: val.filePath,
    //       fileType: val.fileType,
    //       memo: ''
    //     }
    //     this.params.imagesList.push(data)
    //   })
    //   this.notifiySuccess('上传成功')
    // },

    // 文件上传
    uploadSuccess(response, file, fileList) {
      // 接口返回status非200时，把当前上传文件移除
      if (response.status !== 200) {
        let index = null
        fileList.filter((val, key) => {
          if (file.uid === val.uid) {
            index = key
          }
        })
        fileList.splice(index, 1)
        this.notifiyError('上传失败')
      } else { // 上传成功
        const ext = file.name.slice(file.name.lastIndexOf('.') + 1)
        const data = {
          name: file.name,
          uid: file.uid,
          fileSize: file.size,
          fileExtname: ext,
          fileName: file.name,
          filePath: response.data,
          memo: ''
        }
        this.params.imagesList.push(data)
        this.notifiySuccess('上传成功')
      }
    },
    handleRemove(file) {
      let index = null
      this.params.imagesList.filter((val, key) => {
        if (file.uid === val.uid) {
          index = key
        }
      })
      this.params.imagesList.splice(index, 1)
    },
    uploadError(err, file) {
      console.log(err)
      this.notifiyError('上传失败')
      this.handleRemove(file)
    },

    // 保存
    addWarnInformation() {
      this.$refs.addEditWarnRulesFormOne.validate(valid => {
        if (valid) {
          addWarnInformation(this.params).then(res => {
            this.$emit('updateData', res.data)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
